<template>
    <view class="myWallet">
        <view class="search">
            <view class="search-state">
               <!-- <view class="search-label">
                    游戏：
                </view>
                <view class="search-list">
                    <u-dropdown border-radius="0" :border-bottom="false" active-color="#ebd093">
                        <u-dropdown-item v-model="stateIndex"
                            :title="stateList.filter(el=> stateIndex == el.value)[0].label" :options="stateList">
                        </u-dropdown-item>
                    </u-dropdown>
                </view> -->
            </view>
        </view>
        <mytable :thList="thList" :tdList="tdList" :userTabPage="userTabPage" @loadMore="handleMore()"></mytable>
    </view>
</template>

<script>
    import mytable from './myTable.vue'
	import api from "@/api/log"
    export default {
        components: {mytable},
		props: ['date', 'userTabPage'],
        data() {
            return {
                stateIndex: '1',
                stateList: [{
                    label: '全部',
                    value: 1,
                }, {
                    label: '存款',
                    value: 2,
                }, {
                    label: '取款',
                    value: 3,
                }, {
                    label: '下注',
                    value: 3,
                }, {
                    label: '派奖',
                    value: 3,
                }],
                
                thList: [{
                    name: '单号',
                }, {
                    name: '投注时间',
                    label_width: 200
                }, {
                    name: '游戏名',
                }, {
                    name: '投注内容',
                    label_width: 120
                }, {
                    name: '输赢',
                }],
				sel:{},
				tdList: [],
				//分页条件
				pageCondition: {
					//当前页后台字段是这个名字
					page: 1,
					//每页条数
					limit: 50
				}
            }
        },
		watch: {
			'date': function(val) {
				if (val) {
					this.mydate = val
					this.pageCondition.page = 1
					this.tdList = []
					this.getData()
				}
			}
		},
		mounted() {
			this.defaultStartTime = this.getDate();
			this.defaultEndTime = this.getDate();
			this.getData()
		},
		methods: {
			/**
			 * 加载更多
			 * **/
			handleMore() {
				this.pageCondition.page ++ 
				this.getData()
			},
			getData() {
				switch (this.date) {
					case 'today':
						this.sel.type = 1;
						this.sel.end = '';
						this.sel.start = '';
						break;
					case 'yesterday':
						this.sel.type = 2;
						break;
					case 'week':
						this.sel.type = 3;
						break;
					case 'month':
						this.sel.type = 4;
						break;
		
					default:
						this.sel.type = 1;
				}
				this.sel.page = this.pageCondition.page
				this.sel.limit = this.pageCondition.limit
				api.betlog(this.sel).then((res) => {
					if (res.data.code == 200) {
						// this.tdList = res.data.data.data
						this.tdList.push.apply(this.tdList, res.data.data.data)
						this.tdList.forEach(el => {
							el.detailArr = el.detail.split('：')
						})
						if(res.data.data.data.length < 1 && this.pageCondition.page > 1) {
							this.pageCondition.page -= 1
						}
					}
				})
			},
			changeStatus(index) {
				this.current = index
				this.pageCondition.page = 1
				this.tdList = []
			},
			getDate(type) {
				let date = new Date();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				return hour + ':' + minute + ':' + second;
		
			},
			selStart() {
				this.startShow = true;
			},
			selEnd() {
				this.endShow = true;
			},
			confirmStart(e) {
				this.defaultStartTime = e.hour + ':' + e.minute + ':' + e.second;
				this.sel.start = this.defaultStartTime;
				this.getData()
			},
			confirmEnd(e) {
				this.defaultEndTime = e.hour + ':' + e.minute + ':' + e.second;
				this.sel.end = this.defaultEndTime;
				this.getData()
			}
		}
    }
</script>

<style lang="scss" scoped>
    .myWallet{
        color: #666;
    }
    .search {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .search-state {
            display: flex;
            align-items: center;

            .search-list {
                height: 52rpx;
                width: 148rpx;
                border: solid 2rpx #7f7f7f;
                color: #666666;
                border-radius: 26rpx;
                padding: 4rpx 12rpx;
                display: flex;
                align-items: center;

                /deep/ .u-dropdown__content {
                    width: 160rpx;
                    height: 500rpx !important;
                    left: -20rpx;

                    .u-cell-item-box {
                        background-color: rgba(0, 0, 0, 0);

                        .u-cell {

                            padding: 4rpx 24rpx;

                            .u-cell__value {
                                display: none;
                            }
                        }
                    }
                    
                    .u-border-bottom:after {
                        display: none;
                    }
                }
            }
        }

    }
</style>
